<%@ Page Title="Simple photo manager" Language="C#" MasterPageFile="~/Demo.master"
    Inherits="DemoPage" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        DataBind();
    }

    protected override void OnPreRenderComplete(EventArgs e)
    {
        DNA.UI.ClientScriptManager.AddCompositeScript(Page, "jQuery.ui.resizable.js", "jQuery");
        DNA.UI.ClientScriptManager.AddCompositeScript(Page, "jQuery.ui.dialog.js", "jQuery");
        base.OnPreRenderComplete(e);
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="DemoHolder" runat="Server">
    <div class="dna-state-info ui-corner-all" style="margin-bottom: 10px;">
        You can delete an image either by dragging it to the Trash or by clicking the trash
        icon. You can "recycle" an image by dragging it back to the gallery or by clicking
        the recycle icon. You can view larger image by clicking the zoom icon. jQuery UI
        dialog widget is used for the modal window.
        <p style="color: red;">
            In this sample you will found DJ WebControls is so easy to using jQuery on ASP.NET!
            I copy the example form http://ui.jquery.com and convert it in ASP.NET.I have write
            0 code for this sample,all codes in generate by the control's Designer.Look on the
            codes,it's more less than the original sample,and the images date can be sort in
            DataBase thought the SimpleListView to binding the data on page.
        </p>
    </div>
    <br />
    <style type="text/css">
        .gallery { float: left; width: 65%; min-height: 12em; }
        * html .gallery { height: 12em; }
        /* IE6 */.gallery.custom-state-active { background: #eee; }
        .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
        .gallery li h5 { margin: 0 0 0.4em; cursor: move; font-size: 9pt; }
        .gallery li a { float: right; }
        .gallery li a.ui-icon-zoomin { float: left; }
        .gallery li img { width: 100%; cursor: move; }
        .trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
        * html .trash { height: 18em; }
        /* IE6 */.trash h4 { line-height: 16px; margin: 0 0 0.4em; font-size: 10pt; }
        .trash h4 .ui-icon { float: left; }
        .trash .gallery h5 { display: none; }
    </style>

    <script type="text/javascript">
        $(function() {
            // there's the gallery and the trash
            var $gallery = $('.gallery'), $trash = $('.trash');

            // image deletion function
            var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
            function deleteImage($item) {
                $item.fadeOut(function() {
                    var $list = $('ul', $trash).length ? $('ul', $trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);

                    $item.find('a.ui-icon-trash').remove();
                    $item.append(recycle_icon).appendTo($list).fadeIn(function() {
                        $item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
                    });
                });
            }

            // image recycle function
            var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
            function recycleImage($item) {
                $item.fadeOut(function() {
                    $item.find('a.ui-icon-refresh').remove();
                    $item.css('width', '96px').append(trash_icon).find('img').css('height', '72px').end().appendTo($gallery).fadeIn();
                });
            }

            // image preview function, demonstrating the ui.dialog used as a modal window
            function viewLargerImage($link) {
                var src = $link.attr('href');
                var title = $link.siblings('img').attr('alt');
                var $modal = $('img[src$="' + src + '"]');

                if ($modal.length) {
                    $modal.dialog('open')
                } else {
                    var img = $('<img alt="' + title + '" width="384" height="288" style="display:none;padding: 8px;" />')
							.attr('src', src).appendTo('body');
                    setTimeout(function() {
                        img.dialog({
                            title: title,
                            width: 400,
                            modal: true
                        });
                    }, 1);
                }
            }

            // resolve the icons behavior with event delegation
            $('ul.gallery > li').click(function(ev) {
                var $item = $(this);
                var $target = $(ev.target);

                if ($target.is('a.ui-icon-trash')) {
                    deleteImage($item);
                } else if ($target.is('a.ui-icon-zoomin')) {
                    viewLargerImage($target);
                } else if ($target.is('a.ui-icon-refresh')) {
                    recycleImage($item);
                }
                return false;
            });
        });
    </script>

    <DotNetAge:SimpleListView ID="GalleryView" runat="server" CssClass="gallery ui-helper-reset ui-helper-clearfix"
        ItemCssClass="ui-widget-content ui-corner-tr">
        <ItemTemplate>
            <h5 class="ui-widget-header">
                <%# Eval("Text") %>
            </h5>
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' ToolTip='<%# Eval("Text") %>'
                Width="96" Height="72" />
            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("NavigateUrl") %>'
                CssClass="ui-icon ui-icon-zoomin" Text="View larger" ToolTip=" View larger image"> </asp:HyperLink>
            <a href="#" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
        </ItemTemplate>
        <Items>
            <DotNetAge:SimpleListItem Text="Photo1" NavigateUrl="Images/photos/image1.jpg" ImageUrl="~/Droppable/Images/photos/thumb_image1.jpg" />
            <DotNetAge:SimpleListItem Text="Photo1" NavigateUrl="Images/photos/image2.jpg" ImageUrl="~/Droppable/Images/photos/thumb_image2.jpg" />
            <DotNetAge:SimpleListItem Text="Photo1" NavigateUrl="Images/photos/image3.jpg" ImageUrl="~/Droppable/Images/photos/thumb_image3.jpg" />
            <DotNetAge:SimpleListItem Text="Photo1" NavigateUrl="Images/photos/image4.jpg" ImageUrl="~/Droppable/Images/photos/thumb_image4.jpg" />
        </Items>
    </DotNetAge:SimpleListView>
    <asp:Panel ID="TrashPanel" runat="server" CssClass="ui-widget-content ui-state-default trash">
        <h4 class="ui-widget-header">
            <span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
    </asp:Panel>
    <DotNetAge:Draggable ID="Draggable1" runat="server" Revert="Invalid" DragHelper="Clone"
        Cursor="move">
        <DisableDraggingElements Selector="a.ui-icon" />
        <Target TargetIDs="GalleryView>li" />
    </DotNetAge:Draggable>
    <DotNetAge:Droppable ID="GalleryViewDroppable" runat="server" ActiveCssClass="custom-state-active"
        OnClientDrop="recycleImage(ui.draggable);">
        <Target TargetID="GalleryView" />
        <Accept Selector="TrashPanel>li" />
    </DotNetAge:Droppable>
    <DotNetAge:Droppable ID="TrashPanelDroppable" runat="server" ActiveCssClass="ui-state-highlight"
        OnClientDrop="deleteImage(ui.draggable);">
        <Target TargetID="TrashPanel" />
        <Accept Selector="GalleryView>li" />
    </DotNetAge:Droppable>
    <div style="clear: left;">
    </div>
    <br />
    <demo:Code runat="server" ID="codeView" SourceFile="~/Droppable/Codes/SimplePhotoManager.aspx" />
</asp:Content>
